import React, { Component } from 'react'
import { connect } from 'react-redux';
import FlashMessage from "./flashMessage";
import { deleteFlashMessage } from '../../store/actions/flashMessages'
class FlashMessagesList extends Component {
  render() {
    const { message } = this.props;
    return (
      <div className='container'>
        {
          message.map(msg =>
            <FlashMessage message={msg} key={msg.id} deleteFlashMessage={this.props.deleteFlashMessage} />
          )
        }

      </div>
    )
  }
};

const mapStateToProps = (state) => {
  return { message: state.flashMessages }
}

export default connect(mapStateToProps, { deleteFlashMessage })(FlashMessagesList)